Links To Other Files

You can create within your HTML document hot links to the current or other hypertext files. You can also link to graphics files, which would be displayed within the current document. When a person using a browser clicks on one of the links you've created, they will be transferred automatically to the location which is the destination of the link. They can return at any time back to the previous location.

The key to this linking ability is a Uniform Resource Locator, or URL. A URL tells your browser program not only where the file to be linked is but also what method should be used to access the file. The URLs that we will be using in our examples in this tutorial will all specify locations on the A: drive of the local computer and will always in these examples specify standard 'file' access. However, if you were connected to the internet, which would be the usual condition when using a browser like Netscape, the locations specified in a URL could be anywhere on the internet and the access technique could be many things, including File Transfer Protocol (FTP).

Linking To Other HTML Documents

Making a connection to another document requires two things. First, you need to establish an anchor within the current document that the user would click on in order to move to the other document. You do this by surrounding the hypertext with the anchor tags <A> and </A>. Second, you need to add a hypertext reference to the first anchor tag. For example, if you want to link to a document in the current directory named mystuff.txt, the first anchor tag would be written <A HREF="mystuff.txt">. The example shows a reference relative to the current document's location. If the document were on a different drive, you would use an absolute reference. For example, <A HREF="file:///a|/docs/mystuff.txt">, references the "docs" directory on the "A" drive.

Linking To Graphics Files

You can also have GIF format graphics files appear within your document! These are graphics files with the file extension .gif. To include such a graphics image within your document, just introduce each one with the image tag <IMG>. There is no </IMG> tag. Within the tag, you also need to specify the source of the image file to be used. For example, if the graphics file you want to include is in the current directory and named bird.gif, the image source tag would be written <IMG SRC="bird.gif:>. As above, you may also specify an absolute source reference.

A very good practice when including graphics files in your HTML documents is to accomodate users whose browser programs do no display graphics. You can do this by supplying text to be displayed as an alternative to the graphic. For example, if the previously mentioned graphic is a picture of my parakeet Chirp, I could provide a description of the graphic for text-only browsers with <IMG SRC="bird.gif" ALT="my pet parakeet, Chirp">.


Linking To Other Places In The Same Document

You can also create hot links that allow the user to jump from one place in your HTML document to another. For instance, you might have an index where each topic in the index is hot-linked to the location in the document where that topic is discussed.

The first thing you must do to create such a within-document link is insert anchor tags <A> and </A> at the location within the document that is to be the destination of the jump. Within the start anchor tag you must give the location a unique name. For example, in a document discussing pets, you might insert the anchor <A NAME="dogs"></A> where pet dogs are discussed. Then, at the place in the document that is to be the origin of the jump, you would insert the anchor <A HREF="#dogs"> Click here to read about dogs</A>. (Notice the use of the '#' character inside the quotes!

Now, when the user clicks on the index topic, they are taken right to the discussion of that topic.


This was a lot to think about! Why don't you sit on the couch and relax a while before you go back to the main page.

happy face! Brain tired? A couch to sit on Relaxed now? happy face! ... Good!


Back to the main page